<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 项目名称 -->
          <a-select
            class="project-select"
            showSearch
            allowClear
            placeholder="请选择项目名称"
          >
          </a-select>
          <!-- 项目类型 -->
          <a-select showSearch allowClear placeholder="请选择项目类型">
          </a-select>
          <!-- 项目归属区域 -->
          <a-select showSearch allowClear placeholder="请选择项目归属区域">
          </a-select>
          <!-- 文件类别 -->

          <a-select showSearch allowClear placeholder="请选择文件类别">
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="proName" title="项目名称" width="200" align="left">
          </vxe-column>
          <vxe-column title="报批报建流程">
            <template #default="{ row }">
              <div class="files-icon">
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="eye" @click="viewFlow(row)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="status" title="状态">
            <template #default="{ row }">
              <span :class="[filterStateClass(row.status), 'state']">{{
                filterStateName(row.status)
              }}</span>
            </template>
          </vxe-column>
          <vxe-column field="lastUpdateDate" title="最近更新时间"> </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!--  -->
    <div class="page-footer-warp">
      <div class="label">报批报建常用网站：</div>
      <div class="list-warp">
        <div
          class="website-item"
          v-for="(item, index) in websiteSource"
          :key="index"
          @click="hrefWebsite(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <!-- 预览流程 -->
    <viewModal
      :visible.sync="viewModal.visible"
      :parameter="viewModal.row"
    ></viewModal>
  </div>
</template>

<script>
// 图纸会审
import { _getUUID } from "@/utils/util.js";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import { pageFlowPath } from "@/api/knowledgeBase";
import { axios } from "@/utils/request";
import viewModal from "@/pages/customPage/knowledgeBase/flowPath/components/viewModal";
export default {
  components: {
    ScreenConditions,
    viewModal,
  },
  data() {
    return {
      //查询条件
      condition: {},
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //常用网站
      websiteSource: [],
      //流程图
      viewModal: {
        visible: false,
        row: {},
      },
    };
  },
  mounted() {
    this.getTableData();
    this.getWebsiteData();
  },
  methods: {
    //预览流程
    viewFlow(row = {}) {
      this.viewModal.row = row;
      this.viewModal.visible = true;
    },

    //查询常用网站列表
    getWebsiteData() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/expansionSystem/getList`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.websiteSource = data || [];
          })
          .catch((_) => {
            this.websiteSource = [];
            resolve();
          })
          .finally((_) => {});
      });
    },

    //跳转常用网站
    hrefWebsite(data = {}) {
      let { url } = data;
      url && window.open(url);
    },

    //查询
    search() {
      this.pager.page = 1;
      this.pager.pageSize = 50;
      this.getTableData();
    },

    //重置
    reset() {
      this.search();
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      return new Promise((resolve, reject) => {
        pageFlowPath({
          page,
          pageSize,
        })
          .then((res) => {
            this.tableData = res?.rows || [];
            this.pager.total = res?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //校验状态名称  0未开始 1进行中 2已完成
    filterStateName(val) {
      switch (Number(val)) {
        case 0:
          return "未开始";
        case 1:
          return "进行中";
        case 2:
          return "已完成";
        default:
          return "-";
      }
    },

    filterStateClass(val) {
      switch (Number(val)) {
        case 0:
          return "default";
        case 1:
          return "ing";
        case 2:
          return "complete";
        default:
          return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-footer-warp {
  background: #fff;
  margin-top: 10px;
  border-radius: 6px;
  padding: 25px 16px;
  display: flex;
  color: #333;
  font-size: 14px;
  .label {
    flex-shrink: 0;
    margin-right: 12px;
  }
  .list-warp {
    flex: 1;
    flex-wrap: wrap;
    display: flex;
    color: #666;
    .website-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
      &:not(:last-child) {
        margin-right: 50px;
      }
      &::before {
        content: "";
        display: flex;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #f07f17;
        margin-right: 10px;
      }
    }
  }
}
.state {
  &::before {
    position: relative;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    background: #239b53;
    border-radius: 0px 0px 0px 0px;
    border-radius: 50%;
    margin-right: 10px;
  }
  //未开始
  &.default {
    &::before {
      background: #8c8c8c;
    }
  }

  //进行中
  &.ing {
    &::before {
      background: #f07f17;
    }
  }

  //已完成
  &.complete {
    &::before {
      background: #239b53;
    }
  }
}
</style>
